<template>
  <el-dropdown trigger="click">
    <span class="el-dropdown-link">
      <div class="block">
        <el-avatar :size="36" :src="baseUrl + userInfo.photo"></el-avatar>
        <!-- <span>{{userInfo.username}}</span>   -->
      </div>
    </span>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item icon="el-icon-plus" @click="jumpPerson"
          >个人中心</el-dropdown-item
        >
        <el-dropdown-item icon="el-icon-circle-plus" @click="loginOut"
          >退出登录</el-dropdown-item
        >
        <el-dropdown-item icon="el-icon-circle-plus" @click="$router.push('/admin')"
          >后台管理</el-dropdown-item
        >
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  name: "logon",
  data() {
    return {
      dafaultImg: require("@/assets/images/photo.png"),
    };
  },
  computed: { ...mapState(["userInfo"]) },
  methods: {
    ...mapMutations(["clearUser"]),

    jumpPerson() {
      this.$router.push("/person");
    },
    // 退出登录
    async loginOut() {
      let { data } = await this.$axios({
        method: "POST",
        url: "login/out",
      });
      this.$message.success(data.message); //退出登录后弹框提示
      this.clearUser(); //清空vuex里的数据
      //跳转到/路由下  编程式导航
      this.$router.push("/");
    },
  },
  mounted() {},
};
</script>

<style>
</style>